<template>
  <div class="mainBox">
    <a-tabs :default-active-key="key" @change="callback">
      <a-tab-pane key="1" tab="职位类型"></a-tab-pane>
      <a-tab-pane key="2" tab="所属行业"></a-tab-pane>
      <a-tab-pane key="3" tab="学历要求"></a-tab-pane>
      <a-tab-pane key="4" tab="招聘类型"></a-tab-pane>
      <a-tab-pane key="5" tab="发布性质"></a-tab-pane>
      <a-tab-pane key="6" tab="职位亮点"></a-tab-pane>
      <a-tab-pane key="7" tab="技能标签"></a-tab-pane>
      <a-tab-pane key="8" tab="话题标签"></a-tab-pane>
    </a-tabs>
    <div>
      <div style="display: flex">
        <div class="searchBox">
         
           <a-button
        type="danger" style="margin-right: 15px"
        @click="showDeleteConfirm(null)"
      >
        <a-icon type="delete" />批量删除</a-button
      >
       <a-button type="primary" @click="AddList" >
            <a-icon type="plus" />新增</a-button
          >
        </div>
      </div>
      <!-- 表格区域 -->
      <a-table
        :scroll="{ x: true }"
        rowKey="id"
        :rowClassName="rowClassName"
        :columns="columns"
        :data-source="tableData"
        style="margin-top: 24px"
         :row-selection="{
        selectedRowKeys: ids,
        onChange: onSelectChange,
      }"
        :pagination="{
          current: pagination.current,
          total: pagination.total,
          showSizeChanger: true,
          pageSizeOptions: ['5', '10', '15'],
          buildOptionText: (pageSizeOptions) => `${pageSizeOptions.value}条/页`,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
          onShowSizeChange: onShowSizeChange,
          onChange: handleTableChange,
        }"
      >
        <span slot="num" slot-scope="text, record, index">
          {{
            (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1
          }}
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="AddList(record)">修改</a-button>
        </span>
      </a-table>
    </div>
    <a-modal
      :title="Title"
      :visible="visible2"
      :width="640"
      @ok="handleSubmit2"
      @cancel="handleCancel2"
    >
      <a-form :form="form" @submit="handleSubmit2" autoComplete="off">
        <a-row>
          <a-col :span="24">
            <a-form-item label="名称">
              <a-input
                v-decorator="[
                  'fullName',
                  {
                    rules: [{ required: true, message: '请输入名称！' }],
                  },
                ]"
                placeholder="请输入名称"
                :min="0"
              />
            </a-form-item>
            <a-form-item label="排序">
              <a-input-number
                id="inputNumber"
                placeholder="请输入排序"
                v-decorator="['sortCode',
                  {
                    rules: [{ required: true, message: '请输入排序！' }],
                  },]"
                :min="0"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import {
  postAction,
  getAction,
  deleteAction,
  putAction,
  httpAction
} from "../../http/manage";
export default {
  data() {
    return {
      key: "1",
      iid:'',
      form: this.$form.createForm(this),
      flag: "colors",
      dataArr: {},
      ids: [],
      fullName: "",
      Title: "",
      rowSelection: null,
      visible2: false,
      tableData: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      category: "1",
      columns: [
        {
          title: "序号",
          scopedSlots: { customRender: "num" },
        },
        {
          title: "名称",
          dataIndex: "fullName",
        },
         {
          title: "排序",
          dataIndex: "sortCode",
        },
        {
          title: "创建时间",
          dataIndex: "createDate",
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
        },
      ],
      url: {
        list: "/tagLibrary/tagLibrarySelect",
        listAdd: "/tagLibrary/tagLibraryAdd",
        modify: "/tagLibrary/tagLibraryUpdate",
        deleteList: "/tagLibrary/tagLibraryBatchDelete",
      },
    };
  },
  mounted() {
    this.getList(1);
  },
  methods: {
    callback(key) {
      console.log(key);
      this.category = key;
      this.getList(1);
      this.ids=[]
    },
    //查
    getList(current) {
      let params = {
        pageSize: this.pagination.pageSize,
        pageNum: current,
        category: this.category,
      };
      postAction(this.url.list, params)
        .then((res) => {
          if (res.data.code == 0) {
            console.log(res.data.data);
            this.pagination.total = res.data.data.totalRows;
            this.tableData = res.data.data.list;
            console.log(  this.pagination);

            //   this.data = res.data.data
            //   this.listColors = this.dataArr.listColors
            //   this.listStandard = this.dataArr.listStandard
            //   this.listThickness = this.dataArr.listThickness
            //   this.listGoodsColorsidebands = this.data.listGoodsColorsidebands
            //   this.callback(this.key)
          }
        })
        .catch(() => {});
    },
    AddList(record) {
      this.Title = "新增";
      this.visible2 = true;
       this.$nextTick(() => {
          this.form.setFieldsValue({
          sortCode:0,
        });
        });
       this.form.resetFields()
      console.log(record);
      if (record.id) {
        this.Title = "修改";
        this.iid = record.id
        this.$nextTick(() => {
          this.form.setFieldsValue(_.pick(record, ["fullName", "sortCode"]));
        });
      }
    },
    handleSubmit2() {
      this.form.validateFields((err, values) => {
        if (!err) {
          var params = values;
          params["category"] = this.category;
          if (this.Title == "新增") {
            postAction(this.url.listAdd, params)
              .then((res) => {
                if (res.data.code == 0) {
                  this.$message.success("添加成功！");
                  this.visible2 = false;
                  this.getList(1)
                  this.form.resetFields()
                }
              })
              .catch(() => {});
          } else {
               params["id"] = this.iid;
            putAction(this.url.modify, params)
              .then((res) => {
                if (res.data.code == 0) {
                  this.$message.success("修改成功！");
                  this.visible2 = false;
                  this.getList(1)
                  this.form.resetFields()
                }
              })
              .catch(() => {});
          }
        }
      });
    },
    //隔行变色
    rowClassName(record, index) {
      let className = "light-row";
      if (index % 2 === 1) className = "dark-row";
      return className;
    },
    onShowSizeChange(current, pageSize) {
      this.pagination.pageSize = pageSize;
        this.pagination.current = current
        this.getList(current);
      //   console.log(pageSize);
    },
    handleTableChange(current, filters, sorter) {
      this.getList(current);
      this.pagination.current = current
    //   console.log(current);
    },
    handleCancel2() {
      this.visible2 = false;
    },
    onSelectChange (ids) {
      this.ids = ids;
      console.log(ids);
    },
     //删
    showDeleteConfirm (id) {
      var that = this
      if (!id && that.ids.length < 1) {
        that.$message.warning('请先勾选')
      } else {
        this.$confirm({
          title: '确认删除？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          autoFocusButton: null,
          onOk () {
            if (id) {
              httpAction(that.url.deleteList, [id], 'delete').then(res => {
                if (res.data.code == 0) {
                  that.getList(1)
                  that.$message.success('删除成功')
                }
              }).catch(() => { })
            } else {
              httpAction(that.url.deleteList, that.ids, 'delete').then(res => {
                if (res.data.code == 0) {
                  that.getList(1)
                  that.ids = []
                  that.$message.success('删除成功')
                }
              }).catch(() => { })
            }
          },
          onCancel () {
            console.log('Cancel');
          },
        });
      }
    },
  },
};
</script>
<style scoped>
.mainBox {
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  border: 1px solid rgba(229, 236, 237, 1);
  box-shadow: 0px 11px 14px -10px rgba(229, 236, 237, 1);
}
.searchBox {
  margin-left: auto;
}
</style>